<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h2>高级检索</h2>
        <el-form :inline="true" :model="queryParams" class="demo-form-inline" ref="queryForm">
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="queryParams.roleName" placeholder="角色名称"></el-input>
          </el-form-item>
          <el-form-item label="角色授权名称" prop="authorizeName">
            <el-input v-model="queryParams.authorizeName" placeholder="角色授权名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleReset()">重置</el-button>
            <el-button type="primary" @click="loadRoles" :disabled="isLoading">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-button @click="handleDlg(0)">添加角色</el-button>
      <el-table
          :data="tableData"
          border
          style="width: 100%" v-loading="isLoading">
        <el-table-column
            type="index"
            label="编号"
            width="180"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="id"
            label="逻辑编号"
            width="180"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="roleName"
            label="角色名称"
            width="180" align="center">
        </el-table-column>
        <el-table-column
            prop="authorizeName"
            label="授权名称"
            width="180" align="center">
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="创建时间" align="center"
            :formatter="timeFormater"
        >
        </el-table-column>
        <el-table-column
            label="操作" align="center">
          <template v-slot="scope">
<!--     params:{roleId:scope.row.id}   搭配路由写法-->
            <el-button size="mini" type="text" @click="$router.push({name:'alloc-menu',params:{roleId:scope.row.id}})">分配菜单</el-button>
            <el-button size="mini" type="text" @click="$router.push({name:'alloc-resource',params:{roleId:scope.row.id}})">分配资源</el-button>
            <el-button size="mini" type="text" @click="handleDlg(scope.row.id)">编辑</el-button>
            <el-button size="mini" type="text" @click="handleRemoveRole(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.pageSize"
          :page-sizes="[3, 6, 10, 50]"
          :page-size="queryResult.pageNum"
          layout="total, sizes, prev, pager, next, jumper"
          :total="queryResult.totalSize"
          :disabled="isLoading"
      >
      </el-pagination>
    </el-card>
    <update-create-roles @changeRoles="loadRoles" ref="rolesDlg"/>
  </div>
</template>

<script>
import {getAllRolesList, RemoveRoles} from "@/api/roles/roles";
//导入子组件
import  UpdateCreateRoles from './UpdateCreateRoles.vue'
import dayjs from "dayjs";



export default {
  name: "RolesIndex",
  components:{
    UpdateCreateRoles:UpdateCreateRoles
  },
  data() {
    return {
      //查询参数
      queryParams: {
        roleName: '',
        authorizeName: '',
        pageSize: 1,
        pageNum: 3,
        createTime: ''
      },
      //查询结果
      queryResult: {},
      tableData: [],
      //是否加载数据 false加载成功  true正在加载
      isLoading: false
    }
  },
  created() {
    this.loadRoles()
  },
  methods: {
    //时间格式化  这四个参数是默认的参数  行、列、值、索引
    timeFormater(row, column, value, index) {
      return dayjs(value).format('YYYY-MM-DD hh:mm:ss')
    },
    //加载角色分页
    loadRoles() {
      //未加载完成
      this.isLoading=true
      getAllRolesList(this.queryParams).then(res => {
        console.log("角色资源列表:", res);
        if (res.data.code === '200') {
          //当前页,当前页显示多少条数据,展示的多少条,总页数,总记录数
          const {currPage, pageSize, rows, totalPage, totalSize} = res.data.data;
          //当前页,当前页显示多少条数据,和后端数据一致
          console.log("查询参数:", this.queryParams);
          this.queryParams.pageSize = currPage;
          this.queryParams.pageNum = pageSize;
          //展示的多少条,总页数,总记录数
          this.queryResult = {rows, totalPage, totalSize}
          this.tableData = this.queryResult.rows
          console.log("查询参数:", this.queryParams);
        } else {
          this.$message.error('获取角色分页数据失败!')
        }
      }).finally(()=>{
        //加载完成
        this.isLoading=false
      })
    },
    //弹出对话框,父组件内显示
    handleDlg(roleId) {
     this.$refs.rolesDlg.showAndInit(roleId)
    },
    //每页显示多少条数据
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryParams.pageNum = val;
      this.queryParams.pageSize = 1;
      this.loadRoles()
    },
    //当点击不同的页号时
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryParams.pageSize = val;
      this.loadRoles()
    },
    //重置
    handleReset() {
      this.$refs.queryForm.resetFields()
    },
    //删除
    handleRemoveRole(roleId){
      this.$confirm('确认要删除这个角色吗?','删除提示').
      then(()=>{
        RemoveRoles(roleId).then(res=>{
          if(res.data.code=='200'){
            this.$message.success('删除角色成功！')
            this.loadRoles()
          }else {
            this.$message.info('删除角色失败！')
          }
        })
      }).catch(()=>{
        this.$message.info('取消了删除角色的操作！')
      })
    }
  }

}
</script>


<style scoped lang="css">
.el-form {
  margin-left: 130px;
}

.el-table {
  margin-top: 20px
}
</style>
